import React from "react"
import {Divider, Popconfirm, Popover, Tag, Tooltip} from "antd"
import {avatarPath} from "project-config"
import {AlignRightOutlined} from "@ant-design/icons"

const scoreColor = (s) => {
	if (s >= 8) return '#389e0d'
	if (s <= 5) return '#f5222d'
	return '#1890ff'
}

const types = {
	'Clothing': '版型'
}

const columns = ({onDelete, onView}) => [
	{
		title: '类型',
		key: 'type',
		dataIndex: 'type',
		// width: 80,
		render: d => <Tag color={'#1890ff'}>{types[d]}</Tag>
	},
	{
		title: '评论对象',
		key: 'sourceCode',
		dataIndex: 'sourceCode',
		// width: 100
	},
	{
		title: '分数',
		key: 'score',
		dataIndex: 'score',
		// width: 80,
		render: d => <span style={{color: scoreColor(d)}}>{d}</span>
	},
	{
		title: '',
		key: 'displayName',
		dataIndex: 'displayName',
		width: 150,
		render: (_, row) => {
			return <div className={'comments-user'}>
				<div className={'user-avatar'}>
					<img src={avatarPath(row.avatar)}/>
				</div>
				<span>{row.displayName}</span>
			</div>
		}
	},
	{
		title: '内容',
		key: 'content',
		dataIndex: 'content',
		render: (t) => {
			return <Popover content={t}>
				<div className={'comments-content'}>{t}</div>
			</Popover>
		}
	}, {
		title: '操作',
		width: 80,
		key: 'action',
		render: (a, row) => {
			return (
				<Popconfirm
					title="确定删除此条评论吗?"
					placement="rightBottom"
					onConfirm={() => onDelete(row)}
				>
					<a>删除</a>
				</Popconfirm>
			)
		}
	}

]

export default columns